// components/share-dialog/index.js
/**
 * 描述: 优惠券弹窗
 * 版权: Copyright (c) 2019
 * 公司: 深圳市网商天下科技开发有限公司
 * 作者: YUKKING
 * 版本: 1.0.0
 * 创建时间: 2019/10/24 11:39
 */
var app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 弹窗标题
    title: {
      type: String,
      value: '' // 默认值
    },
    // 说明
    text: {
      type: String,
      value: ''
    },
    // 背景图片
    bgImage: {
      type: String,
      value: './assets/bg.png'
    },
    // 背景图片
    qrCodeImage: {
      type: String,
      value: './assets/code.jpg'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 弹窗显示控制
    isShow: false,
    // 分享图url
    imgurl: ''
  },

  ready: function() {

  },

  /**
   * 组件的方法列表
   * 引入component的页面获取该插件 this.selectComponent("#coupon-dialog");
   */
  methods: {
    //隐藏弹框
    hideDialog() {
      this.setData({
        isShow: false
      })
    },
    //展示弹框
    showDialog() {
      this.setData({
        isShow: true
      });
      this._drawShawImage();
    },
    /**
     * 绘制分享图
     */
    _drawShawImage() {
      let that = this;
      wx.showLoading({
        title: '图片正在生成中...'
      })
      const ctx = wx.createCanvasContext('shareImg', this);
      wx.getImageInfo({
        src: that.data.bgImage, //服务器返回的图片地址
        success: function(res) {
          //res.path是网络图片的本地地址
          let Path = res.path;
          console.log(Path);
          ctx.drawImage(Path, 0, 0, 220, 289); //绘制图片
          wx.getImageInfo({
            src: that.data.qrCodeImage, //服务器返回的图片地址
            success: function(res) {
              //res.path是网络图片的本地地址
              let Path = res.path;
              ctx.drawImage(Path, 35, 115, 70, 70); //绘制二维码
              ctx.setTextAlign('center');
              ctx.setFillStyle('#f3f2de');
              ctx.setFontSize(20);
              ctx.fillText(that.data.title, 110, 34);
              ctx.setFontSize(12);
              ctx.fillText(that.data.text, 110, 270);
              ctx.stroke();
              ctx.draw();
              that._createShareImage();
            },
            fail: function(res) {
              console.log(res);
              console.log('图片加载失败');
            }
          });
        },
        fail: function(res) {
          console.log(res);
          console.log('图片加载失败');
        }
      });
    },

    /**
     * 生成分享图并保存
     */
    _createShareImage() {
      var that = this;
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 440,
        height: 578,
        destWidth: 440,
        destHeight: 578,
        canvasId: 'shareImg',
        fileType: 'png', //这里为图片格式，最好改为jpg，如果png的话，图片存到手机可能有黑色背景部分
        success: function(res) {
          that.setData({
            imgurl: res.tempFilePath,
            hidden: false
          })
          that._saveShareImage();
          wx.hideLoading();
        },
        fail: function(res) {
          console.log(res);
          console.log("保存失败......")
          wx.hideLoading();
        }
      }, that)
    },

    /**
     * 保存到手机
     */
    _saveShareImage() {
      let that = this;
      wx.saveImageToPhotosAlbum({
        filePath: that.data.imgurl,
        success(res) {
          wx.showToast({
            title: '保存成功~',
          })
        }
      })
    },

    /**
     * triggerEvent 组件之间通信
     */
    _confirmEvent() {
      this.setData({
        confirmText: '领取成功',
        btnBgColor: '#b2b2b2',
        btnTextBgColor: '#f1f2f3'
      })
      // this.hideDialog();
      // this.triggerEvent("confirm");
    },

    _cancelEvent() {
      this.hideDialog();
      // this.triggerEvent("cancel");
    },
  }
})